<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #img{
            position: fixed;
            width: 500px;
            height: 265px;
            background: url(img/1.png);
            background-size: cover;
            margin-top: -132.5px;
            margin-left: -250px;
            left: 50%;
            top: 50%;
            
        }
        .tip{
            cursor: pointer;
            margin: 8px;
            width: 20px;
            text-align: center;
            border: solid 0px;
            border-radius: 10px;
            position: relative;
            top: 20px;
            left: 463px;
            background-color: rgb(255, 255, 255, 0.2);
        }
        #tip1{
            background-color: orange;
            color: white;
        }
    </style>
</head>
<body>
    <div id="img">
        <div id="tip1" class="tip">1</div>
        <div id="tip2" class="tip">2</div>
        <div id="tip3" class="tip">3</div>
        <div id="tip4" class="tip">4</div>
        <div id="tip5" class="tip">5</div>
        <div id="tip6" class="tip">6</div>
        <div id="tip7" class="tip">7</div>
        <div id="tip8" class="tip">8</div>
    </div>
    <script>
        document.getElementById("tip2").onclick=function(){
            document.getElementById('img').style.backgroundImage='url(img/2.png)'
            document.getElementById("tip2").style.backgroundColor='orange'
            document.getElementById("tip2").style.color='white'
            document.getElementById("tip1").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip1").style.color='black'
            document.getElementById("tip3").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip3").style.color='black'
            document.getElementById("tip4").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip4").style.color='black'
            document.getElementById("tip5").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip5").style.color='black'
            document.getElementById("tip6").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip6").style.color='black'
            document.getElementById("tip7").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip7").style.color='black'
            document.getElementById("tip8").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip8").style.color='black'
        }
        document.getElementById("tip1").onclick=function(){
            document.getElementById('img').style.backgroundImage='url(img/1.png)'
            document.getElementById("tip1").style.backgroundColor='orange'
            document.getElementById("tip1").style.color='white'
            document.getElementById("tip2").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip2").style.color='black'
            document.getElementById("tip3").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip3").style.color='black'
            document.getElementById("tip4").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip4").style.color='black'
            document.getElementById("tip5").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip5").style.color='black'
            document.getElementById("tip6").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip6").style.color='black'
            document.getElementById("tip7").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip7").style.color='black'
            document.getElementById("tip8").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip8").style.color='black'
        }
        document.getElementById("tip3").onclick=function(){
            document.getElementById('img').style.backgroundImage='url(img/3.png)'
            document.getElementById("tip3").style.backgroundColor='orange'
            document.getElementById("tip3").style.color='white'
            document.getElementById("tip1").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip1").style.color='black'
            document.getElementById("tip2").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip2").style.color='black'
            document.getElementById("tip4").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip4").style.color='black'
            document.getElementById("tip5").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip5").style.color='black'
            document.getElementById("tip6").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip6").style.color='black'
            document.getElementById("tip7").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip7").style.color='black'
            document.getElementById("tip8").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip8").style.color='black'
        }
        document.getElementById("tip4").onclick=function(){
            document.getElementById('img').style.backgroundImage='url(img/4.png)'
            document.getElementById("tip4").style.backgroundColor='orange'
            document.getElementById("tip4").style.color='white'
            document.getElementById("tip1").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip1").style.color='black'
            document.getElementById("tip3").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip3").style.color='black'
            document.getElementById("tip2").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip2").style.color='black'
            document.getElementById("tip5").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip5").style.color='black'
            document.getElementById("tip6").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip6").style.color='black'
            document.getElementById("tip7").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip7").style.color='black'
            document.getElementById("tip8").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip8").style.color='black'
        }
        document.getElementById("tip5").onclick=function(){
            document.getElementById('img').style.backgroundImage='url(img/5.png)'
            document.getElementById("tip5").style.backgroundColor='orange'
            document.getElementById("tip5").style.color='white'
            document.getElementById("tip1").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip1").style.color='black'
            document.getElementById("tip3").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip3").style.color='black'
            document.getElementById("tip4").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip4").style.color='black'
            document.getElementById("tip2").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip2").style.color='black'
            document.getElementById("tip6").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip6").style.color='black'
            document.getElementById("tip7").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip7").style.color='black'
            document.getElementById("tip8").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip8").style.color='black'
        }
        document.getElementById("tip6").onclick=function(){
            document.getElementById('img').style.backgroundImage='url(img/6.png)'
            document.getElementById("tip6").style.backgroundColor='orange'
            document.getElementById("tip6").style.color='white'
            document.getElementById("tip1").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip1").style.color='black'
            document.getElementById("tip3").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip3").style.color='black'
            document.getElementById("tip4").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip4").style.color='black'
            document.getElementById("tip5").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip5").style.color='black'
            document.getElementById("tip2").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip2").style.color='black'
            document.getElementById("tip7").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip7").style.color='black'
            document.getElementById("tip8").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip8").style.color='black'
        }
        document.getElementById("tip7").onclick=function(){
            document.getElementById('img').style.backgroundImage='url(img/7.png)'
            document.getElementById("tip7").style.backgroundColor='orange'
            document.getElementById("tip7").style.color='white'
            document.getElementById("tip1").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip1").style.color='black'
            document.getElementById("tip3").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip3").style.color='black'
            document.getElementById("tip4").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip4").style.color='black'
            document.getElementById("tip5").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip5").style.color='black'
            document.getElementById("tip6").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip6").style.color='black'
            document.getElementById("tip2").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip2").style.color='black'
            document.getElementById("tip8").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip8").style.color='black'
        }
        document.getElementById("tip8").onclick=function(){
            document.getElementById('img').style.backgroundImage='url(img/8.png)'
            document.getElementById("tip8").style.backgroundColor='orange'
            document.getElementById("tip8").style.color='white'
            document.getElementById("tip1").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip1").style.color='black'
            document.getElementById("tip3").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip3").style.color='black'
            document.getElementById("tip4").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip4").style.color='black'
            document.getElementById("tip5").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip5").style.color='black'
            document.getElementById("tip6").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip6").style.color='black'
            document.getElementById("tip7").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip7").style.color='black'
            document.getElementById("tip2").style.backgroundColor='rgb(255, 255, 255, 0.2)'
            document.getElementById("tip2").style.color='black'
        }
    </script>
</body>
</html>